<template>
  <main class="login">
    <a-form
      class="login-form shadow"
      layout="vertical"
      :model="formState"
      @finish="handleFinish"
      @finishFailed="handleFinishFailed"
    >
      <a-form-item v-bind="validateInfos.username">
        <a-input v-model:value="formState.username" placeholder="Username">
          <template #prefix
            ><UserOutlined style="color: rgba(0, 0, 0, 0.25)"
          /></template>
        </a-input>
      </a-form-item>
      <a-form-item v-bind="validateInfos.password">
        <a-input
          v-model:value="formState.password"
          type="password"
          placeholder="Password"
        >
          <template #prefix
            ><LockOutlined style="color: rgba(0, 0, 0, 0.25)"
          /></template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-button block type="primary" html-type="submit" :disabled="disabled">
          Log in
        </a-button>
      </a-form-item>
    </a-form>
  </main>
</template>
<script>
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { computed, defineComponent, reactive } from "vue";
import http from "@u/http";
import { useErrorNotice, useSuccessNotice } from "@u/notice";
import { useRoutePathToPage } from "@u/router";
import { useLocalStorage } from "@u/local-storage";
import { Form } from "ant-design-vue";
const useForm = Form.useForm;
export default defineComponent({
  setup() {
    const rules = reactive({
      username: [
        {
          required: true,
          message: "username为必填",
        },
      ],
      password: [
        {
          required: true,
          pattern: /^[1-9][0-9]{4,10}$/,
          message: "password必填且格式为5到11位纯数字",
        },
      ],
    });

    const formState = reactive({
      username: "",
      password: "",
    });
    const { validateInfos } = useForm(formState, rules);

    const [token] = useLocalStorage("token");

    const toArticle = useRoutePathToPage("/manage/article/1");

    const handleFinish = async () => {
      try {
        const res = await http.post("/users/login", formState);
        token.value = res.data.token;
        useSuccessNotice({
          message: "登录成功了哦",
          duration: 0.5,
        });
        setTimeout(toArticle, 800);
      } catch (error) {
        useErrorNotice({
          message: "登录失败了哦",
          description: error.reason || "未知错误",
          duration: 2,
        });
      }
    };

    const handleFinishFailed = (errors) => {
      console.log(errors);
    };

    const disabled = computed(() => {
      const status = [
        validateInfos.username.validateStatus,
        validateInfos.password.validateStatus,
      ].every((status) => status === "success");
      return !status;
    });

    return {
      formState,
      handleFinish,
      handleFinishFailed,
      disabled,
      validateInfos,
    };
  },

  components: {
    UserOutlined,
    LockOutlined,
  },
});
</script>
<style scoped>
.login {
  padding: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-form {
  width: 350px;
  padding: 30px;
  background-color: #fff;
  border: 1px, solid, #cfd8dc;
  border-radius: 8px;
}
</style>